<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <link href="css/register2.css" rel="stylesheet">
 <script type="text/javascript" src="JS/jquery-3.4.1.js" charset="utf-8"></script>
 <script type="text/javascript" charset="UTF-8">
 $(function(){
		if('${msg}' == '1'){
			alert("注册失败,该用户名已存在，请重新确认！")
			// $("#userpassword2").html("登陆失败")
		}
	})
$(function(){
		if('${msg}' == '2'){
			alert("注册成功,页面即将跳转")
			// $("#userpassword2").html("登陆失败")
		}
	})
$(function(){
		if('${msg}' == '3'){
			alert("注册失败!")
			// $("#userpassword2").html("登陆失败")
		}
	})
 $(function(){	 
		//input,鼠标点击输入框后，下方出现的提示
		$('input').eq(0).focus(function(){
			if($(this).val().length==0){
				$(this).parent().next("div").text("支持中文，字母，数字，-,_等多种组合");
				$(this).parent().next("div").css("color",'#ccc');/*#ccc为银灰色*/
			}
		})
		$('input').eq(1).focus(function(){
			if($(this).val().length==0){
			    $(this).parent().next("div").text("建议使用字母，符号，数字两种组合以上，6-20位");
			    $(this).parent().next("div").css("color",'#ccc');
			}
		})
		$('input').eq(2).focus(function(){
			if($(this).val().length==0){
				$(this).parent().next("div").text("确认密码必须与密码相同");
				$(this).parent().next("div").css("color",'#ccc');
			}
		})
		$('input').eq(3).focus(function(){
			if($(this).val().length==0){
				$(this).parent().next("div").text("年龄请输入纯阿拉伯数字");
				$(this).parent().next("div").css("color",'#ccc');
			}
		})
		$('input').eq(4).focus(function(){	
			if($(this).val().length==0){
				$(this).parent().next("div").text();
				$(this).parent().next("div").css("color",'#ccc');
			}
		})
		//用户名_鼠标离开输入框后的提示
		$('input').eq(0).blur(function(){
			if($(this).val().length==0){
				$(this).parent().next("div").text("");
				$(this).parent().next("div").css("color",'#ccc');
			}else if($(this).val().length>0 && $(this).val().length<4){
				$(this).parent().next("div").text("用户名要4-20为，请重新输入");
				$(this).parent().next("div").css("color",'red');
			}//else if($(this).val().length>=4&& !isNaN($(this).val())){//isNaN() 函数用于检查其参数是否是非数字值。非数字返回true,数字返回false
				//$(this).parent().next("div").text("用户名不能为纯数字");
				//$(this).parent().next("div").css("color",'red');
			//}
			else{
				
				$(this).parent().next("div").text("符合规范");
				$(this).parent().next("div").css("color",'green');
			}		
		})
		//设置密码_鼠标离开输入框后的提示
		$('input').eq(1).blur(function(){
			if($(this).val().length==0){
				$(this).parent().next("div").text("");
				$(this).parent().next("div").css("color",'#ccc');
			}else if($(this).val().length>0 && $(this).val().length<6){
				$(this).parent().next("div").text("密码必须为6-20位，请重新输入");
				$(this).parent().next("div").css("color",'red');
			}else{
				$(this).parent().next("div").text("正确");
				$(this).parent().next("div").css("color",'green');
			}		
		})
//		确认密码_鼠标离开输入框后的提示
		$('input').eq(2).blur(function(){
			if($(this).val().length==0){
				$(this).parent().next("div").text("");
				$(this).parent().next("div").css("color",'#ccc');
			}else if($(this).val()!=$('input').eq(1).val()){
				$(this).parent().next("div").text("确认密码与设置的密码不一致，请重新输入");
				$(this).parent().next("div").css("color",'red');
			}else{
				$(this).parent().next("div").text("正确");
				$(this).parent().next("div").css("color",'green');
			}		
		})
		
		$('input').eq(3).blur(function(){
			if($(this).val().length==0){
				$(this).parent().next("div").text("");
				$(this).parent().next("div").css("color",'#ccc');
			}else if($(this).val().length<11||$(this).val().length>11){
				$(this).parent().next("div").text("手机位数错误，请重新确认");
				$(this).parent().next("div").css("color",'red');
			}else{
				$(this).parent().next("div").text("符合规范");
				$(this).parent().next("div").css("color",'green');
			}		
		})

		$("#submit_btn").click(function(e){		
			for(var j=0 ;j<5;j++){
				if($('input').eq(j).val().length==0){				
					
					$('input').eq(j).parent().next(".tips").text("不能为空");
					$('input').eq(j).parent().next(".tips").css("color",'red');	
					e.preventDefault();
					return;
				}
			}
			
			if($('input').eq(0).val.length>0 && $('input').eq(0).val().length<4){
				$('input').eq(0).parent().next("div").text("用户名要4-20为，请重新输入");
				$('input').eq(0).parent().next("div").css("color",'red');
				alert("规范输入后才能提交！")
				e.preventDefault();
				return;
			}
			
			if($('input').eq(1).val().length>0 && $('input').eq(1).val().length<6){
				$('input').eq(1).parent().next("div").text("密码必须为6-20位，请重新输入");
				$('input').eq(1).parent().next("div").css("color",'red');
				alert("规范输入后才能提交！")
				e.preventDefault();
				return;
			}
			
			if($('input').eq(2).val()!=$('input').eq(1).val()){
				$('input').eq(2).parent().next("div").text("确认密码与设置的密码不一致，请重新输入");
				$('input').eq(2).parent().next("div").css("color",'red');
				alert("规范输入后才能提交！")
				e.preventDefault();
				return;
			}
			
			if($('input').eq(3).val().length<11||$('input').eq(3).val().length>11){
				$('input').eq(3).parent().next("div").text("手机位数错误，请重新确认");
				$('input').eq(3).parent().next("div").css("color",'red');
				alert("规范输入后才能提交！")
				e.preventDefault();
				return;
			}
			
			
			if($("#xieyi")[0].checked){
			}else{						
				$("#xieyi").next().next().next(".tips").text("请勾选协议");
				$("#xieyi").next().next().next(".tips").css("color",'red');
				e.preventDefault();
				return;
			}
		})
})
		
 </script>

</head>
<body>

</body>
</html>